<template>
  <div>
    <el-dialog title="拖拽选中示例" :visible.sync="openDia" width="50%" :close-on-click-modal="false">
      <div class="con">
        <AreaSelector :data="data" @change="change">
            <template #item="{ itemData }">
              <div class="item_box" :style="{ backgroundColor: checkList.includes(itemData.id) ? '#b8deff' : ''}">
                {{ itemData.name }}
              </div>
            </template>
        </AreaSelector>
      </div>
      <span slot="footer">
        <el-button @click="openDia = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import AreaSelector from './../../components/AreaSelector'
export default {
  components: {
    AreaSelector
  },
  props: {
    open: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checkList: [],
      data: Array.from({ length: 50 }, (_, index) => ({ id: index + 1, name: `Item ${index + 1}` }))
    }
  },
  computed: {
    openDia: {
      get() {
        return this.open;
      },
      set(val) {
        this.$emit("update:open", val);
      },
    },
  },
  methods: {
    change(arr) {
      this.checkList = arr.map(Number)
    }
  }
}
</script>
<style scoped>
.con {
  width: 100%;
  height: 500px;

  .item_box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%
  }
}
</style>